import React, { useEffect } from 'react';
import { observer } from "mobx-react-lite"
import useStore from '@/context/useStore'
import Aside from "../../components/Aside";
import styles from './file.less'
import { BlockOutlined } from '@ant-design/icons'
import {useHistory} from 'umi'

const File: React.FC = () => {
    let { article } = useStore()
    const history=useHistory()
    useEffect(() => {
        // 推荐文章
        article.getArticleRecommend();
        article.getArchives();
    }, [])
    const godetail=(id:string)=>{
        // history.push('/article/detail'+id)
        history.push(`/article/detail/${id}`,id)
    }
    return (
        <div className={styles.file}>
            <div className={styles.section}>
                <div className={styles.content_header}>
                    <p><BlockOutlined /></p>
                    <p>归档</p>
                    <p> 共计 <span>28</span>篇</p>
                </div>
                {
                    Object.keys(article.archives).reverse().map((item: any) => {
                        return <div key={item} className={styles.title}>
                            <h2>{item}</h2>
                            {
                                Object.keys(article.archives[item]).map(it => {
                                    return <div key={it} className={styles.month}>
                                        <h3>{it}</h3>
                                        <ul>
                                            {
                                                Object.values(article.archives[item][it]).map((em: any) => {
                                                    return <li key={em.id} onClick={()=>{godetail(em.id)}}>
                                                        <a >
                                                            <span>{em.publishAt.slice(5, 10)}</span><span>{em.title}</span>
                                                        </a>
                                                    </li>
                                                })
                                            }
                                        </ul>
                                    </div>
                                })
                            }
                        </div>
                    })
                }
            </div>
            <Aside />
        </div>
    )
}
export default observer(File);